<template>
  <div class="indexBox" @scroll="handleScroll">
    <!-- <div class="nav pd" v-if="isShow">
        <i class="iconfont icon-icon4" @click="toHome"></i>
        <img src="../src/assets/img/avater.jpg" alt="">
    </div> -->
    <router-view/>
    <div class="footerBack iconfont icon-fanhuijiantou-copy" @click="toTop" :class="scrollTop ? 'footerActive' : ''"></div>
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
import { reactive, toRefs } from 'vue'
import _ from 'lodash'
export default {
  setup() {
    const state = reactive({
      scrollTop: false,
      timer: null,
    })
    const handleScroll = _.throttle((e) => {
      if(state.isTrigger && state.timer) {
        clearInterval(state.timer)
        state.timer = null
      }
      let num = e.target.scrollTop || 0
      state.scrollTop = num >= 500
    },100)
    const toTop = _.throttle(() => {
      state.timer = setInterval(() => {
      let osTop = document.querySelector('.indexBox').scrollTop
          //用于设置速度差，产生缓动的效果
          let speed = Math.floor(-osTop / 6);
          document.querySelector('.indexBox').scrollTop = osTop + speed;
          if(osTop == 0){
              clearInterval(state.timer);
              state.timer = null
          }
      },10)
    },2000)
    const route = useRoute()
    // const isShow = computed(() => route.meta.isShowHeader)
    return {
      ...toRefs(state),
      handleScroll,
      toTop
    }
  }
}
</script>

<style>
@import url('//at.alicdn.com/t/font_2266018_lkpp0i5d8k.css');
</style>
<style lang="scss" scoped>
.pd{
  padding: 0 20px;
}
.indexBox{
    width: 100%;
    height: 100vh;
    overflow: auto;
    box-sizing: border-box;
    &::-webkit-scrollbar{
      width: 6px;
      height: 6px;
    }
    &::-webkit-scrollbar-thumb{
      background: #a6a6a4;
      border-radius: 6px;
    }
  .footerBack{
    position: fixed;
    right: 30px;
    bottom: -60px;
    font-size: 30px;
    text-align: center;
    width: 40px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    transition: all 0.5s;
    background-color: #fff;
  }
  .footerActive{
    bottom: 30px;
  }
}

</style>
